<script lang="ts" setup>
import { defineProps } from "vue";
import {requestGetSoundSource} from "../../../utils/axiosURL";
import useSongURLStore from "../../../store/songURL";

const { songData } = defineProps( [ "songData" ])
const songURLStore = useSongURLStore()

// 双击歌曲播放事件函数
const clickSongPlay = (id: number, name: string, singer: string, picUrl: string, duration: number, index: number) => {
  localStorage.setItem("playState", "false")
  songURLStore.playStateChange(false)
  requestGetSoundSource(id).then(({ data }: any) => {
    songURLStore.init(data[0].url, name, singer, picUrl, duration, index, id)
    localStorage.setItem('songInfomation', JSON.stringify(
        {
          songName: name,
          songUrl: data[0].url,
          singer: singer,
          picUrl: picUrl,
          duration: duration,
          index,
          id
        }
    ))
  }).catch((err: any) => {
    console.log(err);
  })
}
</script>

<template>
<ul class="legendListWrap">
  <li class="legendItem"
      v-for="(item, index) in songData"
      @dblclick="clickSongPlay(item.id, item.name, item.ar[0].name, item.al.picUrl, item.dt, index)"
  >
    <div class="rankingInfo">
      <span class="index">{{index + 1}}</span>
<!--      <span class="percentage" v-if="item.vvv === '飙升榜'">100%</span>-->
<!--      <div class="riseAndDecline" v-else>-->
<!--        <span class="iconfont icon-jiantou-copy-copy"></span>-->
<!--        <span class="iconfont icon-jiantou"></span>-->
<!--        <span class="iconfont icon-jianhao"></span>-->
<!--        <span class="iconfont icon-new"></span>-->
<!--      </div>-->
    </div>
    <div class="songInfo">
      <span class="songName">{{ item?.name }}</span>
      <span class="author">{{ item.ar[0]?.name }}</span>
    </div>
  </li>
</ul>
</template>

<style lang="scss" scoped>
.legendListWrap {
  width: 100%;

  .legendItem {
    display: flex;
    align-items: center;
    line-height: 33px;
    padding: 0 8px;
    border-radius: 4px;

    .rankingInfo {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      flex-basis: 60px;

      .index {
        font-family: $activeTextFont;
        color: $font_second_color;
      }

      .percentage {
        font-family: $textFont;
        color: $font_second_color;
        font-size: $font-size-sm;
      }

      .riseAndDecline {
        transform: scale(.7);
        .icon-jiantou-copy-copy { color: $font_red_color; }
        .icon-jiantou { color: rgb(44,119,202); }
        .icon-jianhao { color: $font_second_color; }
        .icon-new { color: $theme-green; }
      }
    }

    .songInfo {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: 10px;

      .songName {
        font-size: $font-size-xs;
        font-family: $textFont;
        color: $font_main_color;
      }

      .author {
        font-size: $font-size-xs;
        font-family: $textFont;
        color: $font_second_color;
      }
    }

    &:nth-child(odd) { background-color: rgb(250,250,250); }
    &:nth-child(1) .index { color: $font_red_color; }
    &:nth-child(2) .index { color: rgb(214,67,60); }
    &:nth-child(3) .index { color: rgb(244,161,145); }
    &:hover { background-color: rgb(240,240,240) }
  }
}
</style>
